<template>
    <div>
        <div class="r-screen-title"><i class="iconfont icon--menu-"></i>筛选</div>
        <Form :label-width="110" :model="data" ref="form" :top="0.2" showErrorTip>
            <div v-for="view,index in list" :key="index" class="r-form-div">
                <FormItem v-if="view.type == 'date' && view.model== 'range' " :label="view.label" prop="view" class="r-formitem-display">
                    <DatePicker v-model="data[view.min_name]" :format="view.format"></DatePicker>
                    -
                    <DatePicker v-model="data[view.max_name]" :format="view.format"></DatePicker>
                </FormItem>
                <FormItem v-else :label="view.label" prop="view.name">
                    <input v-if="view.type == 'input'" type="text" v-model="data[view.name]" :placeholder="view.placeholder"/>
                    
                    <Select v-if="view.type == 'select'" v-width="160" v-model="data[view.name]" :datas="view.option" :keyName="view.keyName" :titleName="view.titleName"></Select>
                </FormItem>
            </div>
            <div class="r-form-div r-form-submit">
                <Button color="blue" @click="intSubmit"><i class="iconfont icon-shaixuan"></i> 筛选</Button>
                <Button noBorder text-color="primary" @click="intReset">清空筛选条件</Button>
            </div>
        </Form>
    </div>
</template>
<script type="text/javascript">

export default {
    name: 'search',
    data() {
        return {

        }
    },
    props: {
        /**
         * 搜索字段
         * @type {Object}
         */
        data: {
            type: [Array, Object],
            default: () => {
                return {
                    id: '',
                    account: '',
                    phone: '',
                    level: '',
                    date:''
                }
            }
        },

        /**
         * 验证规则
         * @type {Object}
         */
        // validationRules:{
        //     type:[Object,Array],
        //     default:()=>{
        //         return {}
        //     }
        // },

        /**
         * 渲染内容
         * @type {Object}
         */
        list: {
            type: [Array, Object],
            default: () => {
                return [{
                        type: 'input',
                        label: 'ID',
                        name: 'id',
                        placeholder: '请输入'
                    }, {
                        type: 'input',
                        label: '账号',
                        name: 'account',
                        placeholder: '请输入'
                    },
                    {
                        type: 'input',
                        label: '手机',
                        name: 'phone',
                        placeholder: '请输入'
                    }, {
                        type: 'select',
                        label: '会员等级',
                        name: 'level',
                        option: [{
                                label: '青铜矿工 I',
                                name: '1'
                            },
                            {
                                label: '青铜矿工 II',
                                name: '2'
                            },
                            {
                                label: '青铜矿工 III',
                                name: '3'
                            },
                            {
                                label: '青铜矿工 VI',
                                name: '4'
                            }
                        ]
                    },{
                        type:'date',
                        name:'date',
                        label:'日期',
                        format:'YYYY-MM-DD',
                        model:'',               //模式
                        placeholder:'请选择'
                    }
                ]
            }
        }
    },
    components: {
        //empty
        
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        /**
         * 提交数据
         * @return {[type]} [description]
         */
        intSubmit(){
            this.$emit('submit',this.data);
        },

        /**
         * 重置表单数据
         * @return {[type]} [description]
         */
        intReset(){
            for(let key in this.data){
                this.data[key] = '';
            }
            console.log('重置',this.data);
        },
    }
}
</script>
<style type="text/css" lang="less">
.r-screen-title{
    height: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #999;
    margin-bottom: 10px;
    i{
        margin-right: 10px;
    }
}
.r-form-div{
    float: left;
    input{
        width: 140px !important;
    }
    .h-form-item{
        padding-bottom: 0px;
    }
}
.r-form-submit{
    margin-top: 8px;
    margin-left: 40px;
}
.h-form .r-form-div{
    &:first-child{
        .h-form-item-label{
            width: 70px !important;
        }
        .h-form-item-content{
            margin-left: 70px !important;
        }

    }
}
.h-form .r-formitem-display{
    .h-form-item-wrap{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .h-datetime{
            width: 140px;
            margin: 0px 10px;
            &:first-child{
                margin-left:0px;
            }
        }

    }
}  
</style>